<script setup lang="ts">
import AnyLive from "./components/anylive/index.vue";
import { ElMessage } from "element-plus";
import { randomstr } from "./utils/index";
import { nextTick, reactive, ref } from "vue";

const live_taggle = ref(false);

const basic_info = reactive({
  appId: "",
  roomId: "",
  role: "audience" as "audience" | "host",
  userId: "",
  // 摄像头
  camera: true,
  // 麦克风
  microphone: true,
});

// 获取组件
const anyRTCLiveRefs = ref();

/** 进入 */
const sumbitJoinFn = () => {
  if (!basic_info.appId) {
    return ElMessage.error("请设置 appId");
  }
  if (!basic_info.roomId) {
    return ElMessage.error("请输入房间 ID");
  }
  live_taggle.value = true;

  !basic_info.userId && (basic_info.userId = randomstr(5));
  nextTick(() => {
    // console.log("anyRTCLiveRefs", anyRTCLiveRefs.value);
    anyRTCLiveRefs.value.liveInit({
      sdkAppId: basic_info.appId,
      userId: basic_info.userId,
      // 频道 id
      roomId: basic_info.roomId,
      // 用户角色
      role: basic_info.role,
      // rtcToken?: string;
      // rtmToken?: string;
      // rtcConfig?: ConfigParameters;
      // rtmConfig?: RtmParameters;

      openCamera: basic_info.role === "host" ? basic_info.camera : false,
      openMicrophone:
        basic_info.role === "host" ? basic_info.microphone : false,
    });
  });
};
</script>

<template>
  <div class="w-full h-full flex justify-center items-center relative">
    <div class="border rounded p-4 w-96">
      <h2 class="text-lg font-semibold text-center py-2 mb-4">
        anyRTC Live deno
      </h2>
      <el-form :model="basic_info" size="large">
        <el-form-item label="房间 ID">
          <el-input v-model="basic_info.roomId" placeholder="房间 ID" />
        </el-form-item>
        <el-form-item label="用户角色">
          <el-radio-group v-model="basic_info.role" class="ml-4">
            <el-radio label="host" size="large">主播</el-radio>
            <el-radio label="audience" size="large">观众</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 主播控制设备 -->
        <el-form-item v-if="basic_info.role === 'host'">
          <div class="flex justify-center space-x-4 w-full">
            <el-checkbox
              v-model="basic_info.camera"
              label="摄像头"
              size="large"
            />
            <el-checkbox
              v-model="basic_info.microphone"
              label="麦克风"
              size="large"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-center w-full">
            <el-button class="px-10" type="primary" @click="sumbitJoinFn">
              进入
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 直播组件 -->
    <div v-if="live_taggle" class="absolute inset-0 z-10 bg-white">
      <any-live ref="anyRTCLiveRefs" @close="live_taggle = false"></any-live>
    </div>
  </div>
</template>
